<template>
	<view>
		<view class="box">
			<view class="box-name">
				<text>{{name}}</text>
			</view>
			<view class="box-text">
				<text>认证成功</text>
			</view>
		</view>
		<!-- 认证按钮 -->
		<!-- <view class="btn">
			<view class="btn-box" @click="changeState">
				<text>重新认证</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: ['name'],
		data() {
			return {}
		},
		methods: {
			changeState() {
				this.$emit('changeState', true)
			}
		},
		created() {
			//this.queryName()
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 500rpx;
		height: 500rpx;
		border-radius: 50%;
		background-color: rgba(42, 130, 228, 1);
		// padding: 20rpx;
		box-shadow: 0 0 10px rgba(42, 130, 228, 1);
		/*添加阴影 向外扩散10px*/

		position: absolute;
		left: 50%;
		top: 30%;

		transform: translate(-50%, -50%);

		.box-name {
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #fff;
		}

		.box-text {
			text-align: center;
			line-height: 300rpx;
			font-size: 46rpx;
			font-weight: 500;
			color: #fff;
		}
	}

	.btn {
		position: fixed;
		z-index: 9;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 160rpx;

		.btn-box {
			width: 80%;
			margin-left: 10%;
			height: 100rpx;
			background-color: rgba(42, 130, 228, 1);
			color: #ffffff;
			border-radius: 60rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
		}
	}
</style>
